<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		 <canvas id="activityDiagram" width="600px" height="600px" style="border: 2px solid rgb(204, 204, 204);cursor:default">
    	 </canvas>
    	 <div id="paintChartToolTipId" style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.701961); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 14px; font-family: &quot;Microsoft YaHei&quot;; line-height: 21px; padding: 5px; left: 298px; top: 143px;">Les Miserables<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#6e7074;">
				
		</div>
	</body>
	<script type="text/javascript" src="jquery-1.8.2.js" ></script>
	<script type="text/javascript">
		  (function(){
		  		var chart;
		  		var left,top,width,height,canvas_id;
		  		var xPointMark = [],yPointMark = [],modelAxis = [];
		  		var initParmas;
		  		var paint = {
		  			init:function(obj,params){
		  					initParmas = params;
		  				    canvas_id = document.getElementById(params.id);
						    chart = canvas_id.getContext("2d"); 
						  
						    left = canvas_id.offsetLeft;
						    top = canvas_id.offsetTop;
						    width = canvas_id.width;
						    height = canvas_id.height;  
						    
						    paint.paintXAxis(obj,params);
						    paint.paintYAxis(obj,params);
						  	paint.paintChart(obj,params);
						   
						   document.onmousemove = paint.mouseMove;
		  			},
		  			paintXAxis:function(obj,params){
		  				var xLength = width+left-params.xdistance - (left+params.xdistance);
		  				var startPointX = left+params.xdistance;
		  				var pointY = height+top-params.ydistance;
		  				paint.paintLine(startPointX,pointY,width+left-params.xdistance,pointY);
		  				
		  				if(!jQuery.isEmptyObject(params.xAxis)){
		  					var average = parseInt(xLength)/parseInt((params.xAxis.length));
		  					for(var i = 1;i <= params.xAxis.length;i++){
		  						paint.paintLine(startPointX+(average * i),pointY,startPointX+(average * i),pointY+5,'black');
		  						paint.patinText(startPointX+(average * i)-(params.xAxis[i-1].length*5),pointY+20,params.xAxis[i-1]);
		  						xPointMark.push({name:params.xAxis[i-1],x:startPointX+(average * i)});
		  					}
		  				}
		  			},
		  			paintYAxis:function(obj,params){
		  				var xLength = width+left-params.xdistance - (left+params.xdistance);
		  				var startPointX = left+params.xdistance;
		  				var pointY = height+top-params.ydistance;
		  				paint.paintLine(startPointX,pointY,startPointX,top+params.ydistance);
		  				
		  				if(!jQuery.isEmptyObject(params.yAxis)){
		  					var average = parseInt(xLength)/parseInt((params.yAxis.length));
		  					for(var i = 1;i <= params.yAxis.length;i++){
		  						paint.paintLine(startPointX,pointY-(average * i),startPointX-5,pointY-(average * i),'black');
		  						paint.patinText(left,pointY-(average * i)+5,params.yAxis[i-1]);
		  						yPointMark.push({name:params.yAxis[i-1],y:pointY-(average * i)});
		  					}
		  				}
		  			},
		  			paintChart:function(obj,params){
		  				var data = params.data;
		  				for(var i = 0;i < data.length;i++){
		  					var lineX1 = paint.getXMark(data[i].x.source);
		  					var lineX2 = paint.getXMark(data[i].x.target);
		  					var lineY = paint.getYMark(data[i].y);
		  			
		  					if(lineX1 < lineX2){
		  						var arrow = [
				  						{x:lineX2,y:lineY},
				  						{x:lineX2-6,y:lineY-6},
				  						{x:lineX2-6,y:lineY+6}
				  					];
				  					paint.paintPolygon(arrow);
				  					paint.patinCircle(lineX1,lineY,3);
		  							paint.paintLine(lineX1-3,lineY,lineX2-6,lineY,'red');
		  							modelAxis.push({x1:lineX1-5,y1:lineY+5,x2:lineX2+5,y2:lineY-5,data:data[i]});
		  							
		  					}else{
		  						var arrow = [
				  						{x:lineX2,y:lineY},
				  						{x:lineX2+6,y:lineY-6},
				  						{x:lineX2+6,y:lineY+6}
				  					];
				  					paint.patinCircle(lineX1,lineY,3);
		  							paint.paintLine(lineX1-3,lineY,lineX2,lineY,'red');
				  					paint.paintPolygon(arrow);
				  					modelAxis.push({x1:lineX2-5,y1:lineY+5,x2:lineX1+5,y2:lineY-5,data:data[i]});
		  					}
		  					
		  				}
		  			},
		  			mouseMove:function(ev){
		  				var mosusePosition = paint.mousePosition(ev);
		  				var flag = false;
		  				 for(var i = 0;i < modelAxis.length;i++){
		  				 		if(modelAxis[i].x1 <= mosusePosition.x && modelAxis[i].x2 >= mosusePosition.x 
		  				 			 && modelAxis[i].y1 >= mosusePosition.y && modelAxis[i].y2 <= mosusePosition.y){
		  				 			 	canvas_id.style.cursor="pointer";
		  				 			 	flag = true;
		  				 			 	var toolTip = "";
		  				 			 	if(initParmas.formatter != null){
		  				 			 		toolTip = initParmas.formatter(modelAxis[i].data);
		  				 			 	}else{
		  				 			 		toolTip = paint.formatter(modelAxis[i].data);
		  				 			 	}
		  				 			 	$("#paintChartToolTipId").html(toolTip);
		  				 			 	$("#paintChartToolTipId").css("display","block");
		  				 			 	$("#paintChartToolTipId").css("left",mosusePosition.x+3);
		  				 			 	$("#paintChartToolTipId").css("top",mosusePosition.y);
		  				 			 }
		  				 }
		  				 if(flag == false){
		  				 	canvas_id.style.cursor="default";
		  				 	$("#paintChartToolTipId").css("display","none");
		  				 }
		  			},
		  			formatter:function(data){
		  					return (data.x.source+" -> "+data.x.target);
		  			},
		  			mousePosition:function(ev){
					   if(ev.pageX || ev.pageY){
					     return {x:ev.pageX, y:ev.pageY};
					   }
					},
		  			bindEvent:function(){
		  				
		  			},
		  			getXMark:function(name){
		  				var x;
		  				for(var i = 0;i < xPointMark.length;i++){
		  					if(name == xPointMark[i].name){
		  						x = xPointMark[i].x;
		  						break;
		  					}
		  				}
		  				return x;
		  			},
		  			getYMark:function(name){
		  				var y;
		  				for(var i = 0;i < yPointMark.length;i++){
		  					if(name == yPointMark[i].name){
		  						y = yPointMark[i].y;
		  						break;
		  					}
		  				}
		  				return y;
		  			},
		  			paintLine:function(x1,y1,x2,y2,color){
		  				chart.beginPath();
						chart.lineWidth = 1;
						chart.strokeStyle = color;
						chart.moveTo(x1,y1);
						chart.lineTo(x2,y2);
						chart.closePath();
						chart.stroke();
		  			},
		  			patinText:function(x,y,text){
		  				chart.font="10px Georgia";
						chart.fillText(text,x,y);
		  			},
		  			patinCircle:function(x,y,r){
		  				chart.beginPath();
		  				chart.arc(x, y, r, 0, Math.PI * 2, false); 
    					chart.closePath();
    					chart.stroke();
    					chart.fillStyle = "red";
					  	chart.fill();
		  			},
		  			paintPolygon:function(pointArr){
		  				chart.beginPath();
		  				chart.lineWidth = 1;
					  	chart.strokeStyle = "red";
					  	
					    chart.moveTo(pointArr[0].x, pointArr[0].y);
						for(var i = 1;i < pointArr.length;i++){
							chart.lineTo(pointArr[i].x, pointArr[i].y);
						}
					    chart.closePath();
					    chart.stroke();
					    chart.fillStyle = "red";
					  	chart.fill();
		  			}
		  		};
		  		
		  		$.fn.extend({
		  			paintChart :function(option){
		  				var params = $.extend({
		  					id:"",
		  					xAxis:[],
		  					yAxis:[],
		  					data:[],
		  					formatter:null
		  				},option);
		  				paint.init(this,params);
		  			}
		  		});
		  		
		  })();
		  $("#activityDiagram").paintChart({
		  		id:"activityDiagram",
		  		xdistance:100,
		  		ydistance:40,
		  		formatter:function(data){
		  			return ("发件方："+data.x.source+"<br />"+"收件方："+data.x.target+"<br />"+"时间："+data.y);
		  		},
		  		xAxis:['AAA','BBB','CCC','DDD','FFFF'],
		  		yAxis:['AAA','BBB','CCC','DDD','FFFF','GGG'],
		  		data:[
		  			{
		  			   x:{
		  			   		source:'AAA',
		  			   		target:'BBB'
		  			   },
		  			   y:'GGG'
		  				
		  			},
		  			{
		  			   x:{
		  			   		source:'CCC',
		  			   		target:'BBB'
		  			   },
		  			   y:'DDD'
		  				
		  			},
		  			{
		  			   x:{
		  			   		source:'FFFF',
		  			   		target:'BBB'
		  			   },
		  			   y:'AAA'
		  				
		  			}
		  		]
		  });
	</script>
</html>
